<template>
  <div class="messages-section">
    <button class="messages-close">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
        <circle cx="12" cy="12" r="10" />
        <line x1="15" y1="9" x2="9" y2="15" />
        <line x1="9" y1="9" x2="15" y2="15" /></svg>
    </button>
    <div class="projects-section-header">
      <p>客户留言</p>
    </div>
    <div class="messages">

      <div class="message-box" v-for="(message,index) in messages":key="index">
        <img :src="message.user.imageIcon" alt="profile image">
        <div class="message-content">
          <div class="message-header">
            <div class="name">{{ message.user.nickName }}</div>
            <div class="star-checkbox">
              <input type="checkbox" :id="'star' + index + 1">
              <label :for="'star' + index + 1">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
              </label>
            </div>
          </div>
          <p class="message-line">
            {{ message.content }}
          </p>
          <p class="message-line time">
            {{message.time}}
          </p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "MessageCom",
  data(){
    return{
      messages:[
        {
          user:{imageIcon:'https://iconfont.alicdn.com/t/4aa049ad-74b3-434c-85dd-38219b7d653f.png', nickName:'小鳄鱼在洗澡',realName:'小张',wechat:'',email:''},
          time:'2021年8月9日',
          content:'一直觉得，这世界上的告别仪式挺多的。比如喝一场大酒，比如一场旅行。又或者情不自禁的在车站大哭一场。可是后来才知道，人生中大部分的告别是悄无声息的。甚至要很多年后自己才明白，原来那天的相见，竟然已是最后一面。此后即便不是隔山隔水，也没有再重逢。\n'
        },
        // {
        //   user:{imageIcon:'https://iconfont.alicdn.com/t/08efc58c-2e27-47e5-97a1-769c4c70c1cd.png', nickName:'小狗再不了',realName:'小王',wechat:'',email:''},
        //   time:'2021年8月9日',
        //   content:'但就像上面对话一样，99%的营销人对它的理解都还有些以偏概全，甚至完全错误。所以怡叔打算用这篇文章带你了解：什么是真正的内容营销，以及，应该从哪些方面下手做好内容营销。\n'
        // },
      ]
    }
  }
}
</script>

<style scoped>

</style>
